<template>
    <el-row>
        <el-col class="btn">
            <el-dialog :visible.sync="dialogVisible" width="875px" :before-close="handleClose" @close="handleClose()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{title}}</span>
                </div>
                <el-form ref="form" label-width="80px" class="reset-form">
                    <el-input class="reset-input" placeholder="搜索资源名称" v-model="searchText">
                        <i slot="suffix" class="el-input__icon el-icon-search cp" @click="zykList()"></i>
                    </el-input>
                </el-form>
                <div class="user-list radio" v-if="page.list.length !=0">
                    <el-radio v-for="(item,index) in page.list" :key="index" :label="item.id" v-model="radio">
                        <div class="list box box-align-center box-pack-start">
                            <div class="icon box box-align-center box-pack-center mr20">
                                <el-image src="/static/image/ldkc/icon_video.png" class="image"
                                    v-if="item.type == `mp4`"></el-image>
                                <el-image src="/static/image/ldkc/pdf.png" class="image" v-if="item.type == `pdf`">
                                </el-image>
                                <el-image src="/static/image/ldkc/ppt.png" class="image" v-if="item.type == `ppt`">
                                </el-image>
                                <el-image src="/static/image/ldkc/word.png" class="image" v-if="item.type == `word`">
                                </el-image>
                            </div>
                            <div class="box box-tb box-align-center box-pack-start">
                                <el-col class="tl mb10 file-name" :title="item.fileName">{{item.fileName}}</el-col>
                                <el-col class="box box-align-center box-pack-start">
                                    <span>{{item.userName}}</span>| <span> {{item.createDate}} 上传</span>
                                </el-col>
                            </div>
                        </div>
                    </el-radio>
                </div>
                <div class="padd20" v-else>暂无数据</div>
                <span slot="footer" class="dialog-footer box box-pack-start btn">
                    <el-upload class="upload-demo" :action="uploadfileurl" :show-file-list="false" :limit="1" accept=".mp4"
                        :on-progress="progress" ref="upload" :on-success="success" :auto-upload="true"
                        :before-upload="beforeUpload">
                        <el-button class="reset-upload-btn" icon="el-icon-upload">本地上传</el-button>
                    </el-upload>
                    <div class="pro">
                        <span class="pro-name" :title="successFileName">{{successFileName}}</span>
                        <el-progress v-if="showProgress" :color="customColor" :percentage="progInt" style="width: 100%;"></el-progress>
                    </div>
                    <div class="confirm-btn">
                        <el-button class="reset-cancel-btn" @click="handleClose()">取 消</el-button>
                        <el-button class="reset-comfirm-btn" @click="onSubmit()">确 定</el-button>
                    </div>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: {
            dialogVisible: {
                default: false
            },
            title: {
                type: String,
                default: '添加'
            },
            jyzid: {
                type: Number
            },
            sectionid: {
                type: Number
            },
            addtype: {
                type: Number
            }
        },
        data() {
            return {
                customColor: '#626bf1',
                radio: '',
                filelid: 0,
                searchText: '',
                page: {
                    total: 0,
                    pageSize: 10,
                    pageNum: 1,
                    list: []
                },
                loginInfo: this.$store.state.loginInfo,
                uploadfileurl: this.$url.baseURL + '/upload/uploadfile',
                showProgress: false,
                progInt: 0,
                successFileName: ''
            };
        },
        methods: {
            zykList(pageNum) {
                var params = {
                    jyzid: this.jyzid,
                    type: "1",
                    searchtext: this.searchText,
                    pageNum: pageNum
                };
                this.$api.jyz.zykList(params).then(res => {
                    if (res.code == '0') {
                        this.page = res.list;
                    } else {
                        this.$message.error('操作失败！');
                    }
                })
            },
            handleClose() {
                this.$emit('clickClose')
            },
            onSubmit() {
                if (this.radio != '') {
                    this.filelid = this.radio;
                }
                var params = {
                    fileid: this.filelid,
                    //stageid: this.stageid,
                    sectionid: this.sectionid,
                    trid: this.loginInfo.user.id,
                    addtype: this.addtype
                };
				console.log(params);
                this.$api.jyz.addKcVideo(params).then(res => {
                    if (res.code == '0') {
                        this.$message.success('已上传！');
                        this.$emit('listCousSatge')
                        this.handleClose();
                    } else {
                        this.$message.error('上传失败！');
                    }
                })
            },
            handleExceed(files, fileList) {
                this.$message.warning(
                    `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            // 上传文件前的文件格式、尺寸等等的规则定制
            beforeUpload(file) {
                const fileName = file.name;
                const index = fileName.lastIndexOf(".");
                const ext = fileName.substr(index + 1);
                if (ext != 'mp4') {
                    this.$message.warning('课程视频仅支持mp4格式！');
                    return false;
                }
                var imgSize = file.size / (1024 * 1024 * 2);
                if (imgSize > 2048) {
                    this.$message.warning(`当前文件${ parseInt(imgSize) }M,上传文件不能超过2G`)
                    return false
                }
            },
            progress(event) {
                console.log(this.$url.baseURL);
                this.showProgress = true;
                this.progInt = parseInt(event.loaded / event.total * 100, 10);
            },
            success(response, file, fileList) {
				console.log(file);
                this.filelid = response.body.data.fileid;
                this.successFileName = file.name;
            },
        }
    };
</script>

<style scoped lang="scss">
    .upload-icon {
        width: 110px;
        height: 110px;
        background-color: #F0F1F8;
        line-height: 110px;
        color: #626BF1;
        font-size: 30px;
        border-radius: 10px;
    }

    .avatar {
        width: 110px;
        height: 110px;
    }

    .w100 {
        width: 100%;
    }

    .reset-form {
        padding: 0 20px;
    }


    .user-list {

        .checkbox__label {
            width: 80%;
        }

        .list {
            width: 100%;
            padding: 10px 0;

            .icon {
                width: 56px;
                height: 56px;
                background: #ECEAFF;
                border-radius: 10px;

                .image {
                    width: 27px;
                    height: 31px;
                }
            }
        }

        .item {
            display: block;
            width: 120px;
            margin-right: 30px;
        }
    }

    .pro {
        padding: 0 20px;
        width: 450px;
        min-width: 450px;
        height: 30px;
        line-height: 30px;
        text-align: left;

        .pro-name{
            display: block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    }
    .confirm-btn{
        min-width: 180px;
    }


    .user-list>>>.el-checkbox {
        padding: 0 20px;
        width: 585px;
        margin-right: 0;
        display: flex;
        justify-content: center;
    }

    .user-list>>>.el-checkbox__label {
        width: 480px;

        .list {
            display: flex;
            color: #000000;
        }
    }

    .user-list>>>.el-checkbox__input {
        display: flex;
        align-items: center;
    }

    .user-list>>>.el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #626BF1;
        border-color: #626BF1;
    }

    .user-list>>>.el-checkbox__inner:hover {
        border-color: #626BF1;
    }

    .user-list>>>.el-checkbox__input.is-focus,
        {
        border-color: #626BF1;

        .el-checkbox__inner {
            border-color: #626BF1;
        }
    }

    .file-name {
        width: 406px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    //单选
    .user-list>>>.el-radio {
        padding-left: 50px;
        width: 585px;
        margin-right: 0;
        display: flex;
        justify-content: flex-start;
    }

    .user-list>>>.el-radio__input {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .user-list>>>.el-radio__input.is-checked+.el-radio__label {
        color: #000000;
    }

    .user-list>>>.el-radio__input.is-checked .el-radio__inner {
        border-color: #626BF1;
        background: #626BF1;
    }
</style>
